In this CSS tutorial, we will be going to discuss the CSS background properties in deep. And we will also be covering all the other properties associated with the background of the element.
Set Multiple Background
We know that we can set an image as a background for our element using the
background-image
property. But using the same property, we can set multiple images as a background for the element.
Syntax
The images
url()
must be separated with a comma. The browser will stack image 1 over image 2, if you do not want one image to stack over another then you can use the
background-position
property to set images positions.
Example
Note : The above same example can be performed using the shorthand background property
CSS Background Size
If the size of the background is too large for the element box model then using the
background-size
property we can set the size of the background image, and make it fit according to the element box model. The
background-size
property accepts value in length and percentage unit or we can either use two reserved keywords
contain
or
cover
. The
contain
value will scale the image up to its full content so it could fit as the complete background. But if the image is too small then according to the elements box model then it will not cover the complete background. The
cover
value will scale and stretch the image so it can cover the complete background of the element.
Example
Background Size of Multiple Background Images
If an element has multiple images as a background then the size of an individual image can be specified using the background-size property. The sizes must be mentioned in the same order separated with a comma as they specified in the background-image.
Example
CSS background-origin property
The
background-origin
property defines the position of the background image and it accepts only three values.
-
border-box
positioned the background image from the upper left corner border. -
padding-box
is the default value for the background-origin property and it positioned the background image from the upper left corner of the padding edge. -
content-box
positioned the image from the upper left corner of the content.
Example
CSS background-clip property
The
background-clip
property defines which part of the element box should be painted by the
background-color
. It accepts 3 values
-
border-box
is the default value for the border-clip property and it paints the complete element background with the background color, including the outside edges of the border. -
padding-box
property paint only the element content and the outside edges of the padding. -
content-box
paint only the content area of the element.
Example
Summary
-
The
background
property is a shorthand property for its all the sub background properties such asbackground-image, background-color, background-size,
etc. -
The
background-clip
defines the painting area of the background color. -
The
background-origin
define the position area of the background image -
The
background-size
can manipulate the size of the background images.